import echarts from 'echarts'
// 静态属性，样式属性，剥离数据 多种屏幕尺寸都事先部署好
const staticOption = {
  baseOption: {
    title: {
      text: '试题组卷率',
      top: '60%',
      fontSize: 24,
      textStyle: {
        color: '#d9e7ff',
        fontWeight: 'normal'
      },
      left: 'center'
    },
    timeline: {
      axisType: 'category',
      autoPlay: false,
      playInterval: 3000,
      bottom: '5%',
      left: '30%',
      right: '30%',
      symbol: 'emptyCircle',
      symbolSize: 15,
      data: [],
      lineStyle: {
        show: false,
        color: '#bad3ff'
      },
      label: {
        color: '#bad3ff',
        fontSize: 22,
        interval: 0,
        padding: [0, 0, -30, 0]
      },
      checkpointStyle: {
        color: '#00fffc',
        symbolSize: 20,
        borderWidth: 15,
        borderColor: 'rgba(0, 255, 252, 0.3)'
      },
      controlStyle: {
        color: '#bad3ff',
        borderColor: '#bad3ff',
        itemSize: 36,
        showPlayBtn: false,
        showPrevBtn: false,
        showNextBtn: false
      },
      emphasis: {
        controlStyle: {
          borderColor: '#d6e1ff'
        },
        label: {
          color: '#bad3ff',
          fontSize: 24,
          padding: [0, 0, -30, 0]
        },
        itemStyle: {
          color: '#bad3ff'
        }
      }
    },
    color: [
      (new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
        // 0% 处的颜色
        offset: 0,
        color: '#fd4f61'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#fe8a9a'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#ff8466'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#ffb69f'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#ffcf6a'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#ffe5a1'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#8ae267'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#baf0a0'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#1ac2a6'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#48ddcc'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#0ab5fd'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#26d6fe'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#007bff'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#00afff'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#475ef0'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#8297f8'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#9654e4'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#c290f2'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#ed5192'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#f68cc0'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#d9a6e2'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#ebccf0'
      }
      ], false))],
    grid: [
      {x: '3%', y: '7%', width: '38%', height: '45%'},
      {x2: '5%', y: '7%', width: '38%', height: '45%'},
      {x: '3%', y2: '20%', width: '90%', height: '10%'}
    ],
    tooltip: {},
    yAxis: [
      {
        gridIndex: 0,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      {
        gridIndex: 1,
        type: 'category',
        data: ['其他', '综合题', '简答题', '连线题', '跟读题', '听力题', '判断题', '填空题',
          '多选题', '单选题'],
        offset: 10,
        axisLine: {
          lineStyle: {
            color: '#4876c7',
            width: 2
          }
        },
        axisLabel: {
          textStyle: {
            color: '#94aad4',
            fontSize: 20
          }
        },
        axisTick: {
          show: false
        }
      },
      {
        gridIndex: 2,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        }
      }
    ],
    xAxis: [
      {
        gridIndex: 0,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      {
        gridIndex: 1,
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#4876c7',
            width: 2
          }
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            color: '#94aad4',
            fontSize: 20
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#052667',
            width: 2
          }
        }
      },
      {
        gridIndex: 2,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        type: 'category',
        data: []
      }
    ],
    series: [
      {
        name: 'I',
        type: 'funnel',
        left: '10%',
        width: '30%',
        height: '45%',
        minSize: '0%',
        maxSize: '100%',
        sort: 'descending',
        gap: 0,
        label: {
          normal: {
            show: true,
            position: 'left',
            textStyle: {
              fontSize: 20
            }
          },
          emphasis: {
            textStyle: {
              fontSize: 20
            }
          }
        },
        labelLine: {
          normal: {
            lineStyle: {
              width: 1,
              type: 'solid'
            }
          }
        },
        itemStyle: {
          normal: {
            borderColor: '#fff',
            borderWidth: 1
          }
        }
      },
      {
        name: 'II',
        type: 'bar',
        xAxisIndex: 1,
        yAxisIndex: 1,
        barMaxWidth: '15',
        label: {
          show: true,
          position: 'right',
          textStyle: {
            color: '#007bff',
            fontSize: 20
          }
        },
        itemStyle: {
          barBorderRadius: [0, 3, 3, 0],
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
            // 0% 处的颜色
            offset: 0,
            color: '#007bff'
          }, {
            // 100% 处的颜色
            offset: 1,
            color: '#00afff'
          }
          ], false)
        }
      },
      {
        name: 'III',
        type: 'bar',
        xAxisIndex: 2,
        yAxisIndex: 2,
        barMaxWidth: 38,
        barBorderRadius: 4,
        itemStyle: {
          barBorderRadius: 4
        }
      },
      {
        name: 'IIII',
        type: 'bar',
        barGap: '-100%',
        xAxisIndex: 2,
        yAxisIndex: 2,
        barMaxWidth: 38,
        zlevel: -1,
        z: -1,
        itemStyle: {
          color: '#05388f',
          opacity: '0.2',
          barBorderRadius: 4
        }
      }
    ]
  },
  options: []
}

const staticOptionMid = {
  baseOption: {
    title: {
      text: '试题组卷率',
      top: '60%',
      fontSize: 20,
      textStyle: {
        color: '#d9e7ff',
        fontWeight: 'normal'
      },
      left: 'center'
    },
    timeline: {
      axisType: 'category',
      autoPlay: false,
      playInterval: 3000,
      bottom: '3%',
      left: '25%',
      right: '25%',
      symbol: 'emptyCircle',
      symbolSize: 12,
      data: [],
      lineStyle: {
        show: false,
        color: '#bad3ff'
      },
      label: {
        color: '#bad3ff',
        fontSize: 18,
        interval: 0,
        padding: [0, 0, -10, 0]
      },
      checkpointStyle: {
        color: '#00fffc',
        symbolSize: 15,
        borderWidth: 10,
        borderColor: 'rgba(0, 255, 252, 0.3)'
      },
      controlStyle: {
        color: '#bad3ff',
        borderColor: '#bad3ff',
        itemSize: 24,
        showPlayBtn: false,
        showPrevBtn: false,
        showNextBtn: false
      },
      emphasis: {
        controlStyle: {
          borderColor: '#d6e1ff'
        },
        label: {
          color: '#bad3ff',
          fontSize: 24,
          padding: [0, 0, -30, 0]
        },
        itemStyle: {
          color: '#bad3ff'
        }
      }
    },
    color: [
      (new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
        // 0% 处的颜色
        offset: 0,
        color: '#fd4f61'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#fe8a9a'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#ff8466'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#ffb69f'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#ffcf6a'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#ffe5a1'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#8ae267'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#baf0a0'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#1ac2a6'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#48ddcc'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#0ab5fd'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#26d6fe'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#007bff'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#00afff'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#475ef0'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#8297f8'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#9654e4'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#c290f2'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#ed5192'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#f68cc0'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#d9a6e2'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#ebccf0'
      }
      ], false))],
    grid: [
      {x: '3%', y: '7%', width: '38%', height: '45%'},
      {x2: '5%', y: '7%', width: '38%', height: '45%'},
      {x: '3%', y2: '20%', width: '90%', height: '10%'}
    ],
    tooltip: {},
    yAxis: [
      {
        gridIndex: 0,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      {
        gridIndex: 1,
        type: 'category',
        data: ['其他', '综合题', '简答题', '连线题', '跟读题', '听力题', '判断题', '填空题',
          '多选题', '单选题'],
        offset: 10,
        axisLine: {
          lineStyle: {
            color: '#4876c7',
            width: 2
          }
        },
        axisLabel: {
          textStyle: {
            color: '#94aad4',
            fontSize: 16
          }
        },
        axisTick: {
          show: false
        }
      },
      {
        gridIndex: 2,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        }
      }
    ],
    xAxis: [
      {
        gridIndex: 0,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      {
        gridIndex: 1,
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#4876c7',
            width: 2
          }
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            color: '#94aad4',
            fontSize: 16
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#052667',
            width: 2
          }
        }
      },
      {
        gridIndex: 2,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        type: 'category',
        data: []
      }
    ],
    series: [
      {
        name: 'I',
        type: 'funnel',
        left: '10%',
        width: '30%',
        height: '45%',
        minSize: '0%',
        maxSize: '100%',
        sort: 'descending',
        gap: 0,
        label: {
          normal: {
            show: true,
            position: 'left',
            textStyle: {
              fontSize: 16
            }
          },
          emphasis: {
            textStyle: {
              fontSize: 18
            }
          }
        },
        labelLine: {
          normal: {
            lineStyle: {
              width: 1,
              type: 'solid'
            }
          }
        },
        itemStyle: {
          normal: {
            borderColor: '#fff',
            borderWidth: 1
          }
        }
      },
      {
        name: 'II',
        type: 'bar',
        xAxisIndex: 1,
        yAxisIndex: 1,
        barMaxWidth: '15',
        label: {
          show: true,
          position: 'right',
          textStyle: {
            color: '#007bff',
            fontSize: 16
          }
        },
        itemStyle: {
          barBorderRadius: [0, 3, 3, 0],
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
            // 0% 处的颜色
            offset: 0,
            color: '#007bff'
          }, {
            // 100% 处的颜色
            offset: 1,
            color: '#00afff'
          }
          ], false)
        }
      },
      {
        name: 'III',
        type: 'bar',
        xAxisIndex: 2,
        yAxisIndex: 2,
        barMaxWidth: 38,
        barBorderRadius: 4,
        itemStyle: {
          barBorderRadius: 4
        }
      },
      {
        name: 'IIII',
        type: 'bar',
        barGap: '-100%',
        xAxisIndex: 2,
        yAxisIndex: 2,
        barMaxWidth: 38,
        zlevel: -1,
        z: -1,
        itemStyle: {
          color: '#05388f',
          opacity: '0.2',
          barBorderRadius: 4
        }
      }
    ]
  },
  options: []
}

const staticOptionSmall = {
  baseOption: {
    title: {
      text: '试题组卷率',
      top: '60%',
      fontSize: 20,
      textStyle: {
        color: '#d9e7ff',
        fontWeight: 'normal'
      },
      left: 'center'
    },
    timeline: {
      axisType: 'category',
      autoPlay: false,
      playInterval: 3000,
      bottom: '3%',
      left: '40%',
      right: '40%',
      symbol: 'emptyCircle',
      symbolSize: 12,
      data: [],
      lineStyle: {
        show: false,
        color: '#bad3ff'
      },
      label: {
        color: '#bad3ff',
        fontSize: 18,
        interval: 0,
        padding: [0, 0, -10, 0]
      },
      checkpointStyle: {
        color: '#00fffc',
        symbolSize: 15,
        borderWidth: 10,
        borderColor: 'rgba(0, 255, 252, 0.3)'
      },
      controlStyle: {
        color: '#bad3ff',
        borderColor: '#bad3ff',
        itemSize: 24,
        showPlayBtn: false,
        showPrevBtn: false,
        showNextBtn: false
      },
      emphasis: {
        controlStyle: {
          borderColor: '#d6e1ff'
        },
        label: {
          color: '#bad3ff',
          fontSize: 24,
          padding: [0, 0, -30, 0]
        },
        itemStyle: {
          color: '#bad3ff'
        }
      }
    },
    color: [
      (new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
        // 0% 处的颜色
        offset: 0,
        color: '#fd4f61'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#fe8a9a'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#ff8466'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#ffb69f'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#ffcf6a'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#ffe5a1'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#8ae267'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#baf0a0'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#1ac2a6'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#48ddcc'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#0ab5fd'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#26d6fe'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#007bff'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#00afff'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#475ef0'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#8297f8'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#9654e4'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#c290f2'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#ed5192'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#f68cc0'
      }
      ], false)),
      (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        // 0% 处的颜色
        offset: 0,
        color: '#d9a6e2'
      }, {
        // 100% 处的颜色
        offset: 1,
        color: '#ebccf0'
      }
      ], false))],
    grid: [
      {x: '3%', y: '7%', width: '38%', height: '45%'},
      {x2: '5%', y: '7%', width: '38%', height: '45%'},
      {x: '3%', y2: '20%', width: '90%', height: '10%'}
    ],
    tooltip: {},
    yAxis: [
      {
        gridIndex: 0,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      {
        gridIndex: 1,
        type: 'category',
        data: ['其他', '综合题', '简答题', '连线题', '跟读题', '听力题', '判断题', '填空题',
          '多选题', '单选题'],
        offset: 10,
        axisLine: {
          lineStyle: {
            color: '#4876c7',
            width: 2
          }
        },
        axisLabel: {
          textStyle: {
            color: '#94aad4',
            fontSize: 16
          }
        },
        axisTick: {
          show: false
        }
      },
      {
        gridIndex: 2,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        }
      }
    ],
    xAxis: [
      {
        gridIndex: 0,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      {
        gridIndex: 1,
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#4876c7',
            width: 2
          }
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            color: '#94aad4',
            fontSize: 16
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#052667',
            width: 2
          }
        }
      },
      {
        gridIndex: 2,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        type: 'category',
        data: []
      }
    ],
    series: [
      {
        name: 'I',
        type: 'funnel',
        left: '10%',
        width: '30%',
        height: '45%',
        minSize: '0%',
        maxSize: '100%',
        sort: 'descending',
        gap: 0,
        label: {
          normal: {
            show: true,
            position: 'left',
            textStyle: {
              fontSize: 16
            }
          },
          emphasis: {
            textStyle: {
              fontSize: 18
            }
          }
        },
        labelLine: {
          normal: {
            lineStyle: {
              width: 1,
              type: 'solid'
            }
          }
        },
        itemStyle: {
          normal: {
            borderColor: '#fff',
            borderWidth: 1
          }
        }
      },
      {
        name: 'II',
        type: 'bar',
        xAxisIndex: 1,
        yAxisIndex: 1,
        barMaxWidth: '15',
        label: {
          show: true,
          position: 'right',
          textStyle: {
            color: '#007bff',
            fontSize: 16
          }
        },
        itemStyle: {
          barBorderRadius: [0, 3, 3, 0],
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
            // 0% 处的颜色
            offset: 0,
            color: '#007bff'
          }, {
            // 100% 处的颜色
            offset: 1,
            color: '#00afff'
          }
          ], false)
        }
      },
      {
        name: 'III',
        type: 'bar',
        xAxisIndex: 2,
        yAxisIndex: 2,
        barMaxWidth: 38,
        barBorderRadius: 4,
        itemStyle: {
          barBorderRadius: 4
        }
      },
      {
        name: 'IIII',
        type: 'bar',
        barGap: '-100%',
        xAxisIndex: 2,
        yAxisIndex: 2,
        barMaxWidth: 38,
        zlevel: -1,
        z: -1,
        itemStyle: {
          color: '#05388f',
          opacity: '0.2',
          barBorderRadius: 4
        }
      }
    ]
  },
  options: []
}

// 备选颜色，有需求则进行循环

const colors = ['#fe6e80', '#ffa286', '#ffdd89', '#a7eb87', '#2bd3bd', '#12cafe',
  '#0099ff', '#657df5', '#b174ed', '#f371ae', '#e3b9e9']

// 渐变色轨迹不同，分别设置
const gradientColors = [
  (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    // 0% 处的颜色
    offset: 0,
    color: '#fd4f61'
  }, {
    // 100% 处的颜色
    offset: 1,
    color: '#fe8a9a'
  }
  ], false)),
  (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    // 0% 处的颜色
    offset: 0,
    color: '#ff8466'
  }, {
    // 100% 处的颜色
    offset: 1,
    color: '#ffb69f'
  }
  ], false)),
  (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    // 0% 处的颜色
    offset: 0,
    color: '#ffcf6a'
  }, {
    // 100% 处的颜色
    offset: 1,
    color: '#ffe5a1'
  }
  ], false)),
  (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    // 0% 处的颜色
    offset: 0,
    color: '#8ae267'
  }, {
    // 100% 处的颜色
    offset: 1,
    color: '#baf0a0'
  }
  ], false)),
  (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    // 0% 处的颜色
    offset: 0,
    color: '#1ac2a6'
  }, {
    // 100% 处的颜色
    offset: 1,
    color: '#48ddcc'
  }
  ], false)),
  (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    // 0% 处的颜色
    offset: 0,
    color: '#0ab5fd'
  }, {
    // 100% 处的颜色
    offset: 1,
    color: '#26d6fe'
  }
  ], false)),
  (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    // 0% 处的颜色
    offset: 0,
    color: '#007bff'
  }, {
    // 100% 处的颜色
    offset: 1,
    color: '#00afff'
  }
  ], false)),
  (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    // 0% 处的颜色
    offset: 0,
    color: '#475ef0'
  }, {
    // 100% 处的颜色
    offset: 1,
    color: '#8297f8'
  }
  ], false)),
  (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    // 0% 处的颜色
    offset: 0,
    color: '#9654e4'
  }, {
    // 100% 处的颜色
    offset: 1,
    color: '#c290f2'
  }
  ], false)),
  (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    // 0% 处的颜色
    offset: 0,
    color: '#ed5192'
  }, {
    // 100% 处的颜色
    offset: 1,
    color: '#f68cc0'
  }
  ], false)),
  (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    // 0% 处的颜色
    offset: 0,
    color: '#d9a6e2'
  }, {
    // 100% 处的颜色
    offset: 1,
    color: '#ebccf0'
  }
  ], false))]
let colorIndex = 0

// 获取设备宽度
const screen = window.screen.width

class ChartFactory {
  constructor (additionalOptions) {
    // 根据屏幕宽度获取不同配置的echarts配置
    this.option = staticOption
    if (screen < 1920 && screen > 1200) {
      this.option = staticOptionMid
    }
    if (screen === 1024) {
      this.option = staticOptionSmall
    }
    // 下方复制属于浅拷贝，指向同个内存，针对可能有更改的需求，要进行一次清理
    this.clear()
    // colorIndex = 0
    // 装配数据 必须使用箭头函数
    this.option.baseOption.timeline.autoPlay = additionalOptions.timelineAutoPlay
    this.option.baseOption.timeline.playInterval = additionalOptions.playInterval
    this.option.baseOption.timeline.data = additionalOptions.timelineLabel
    additionalOptions.seriesData.forEach((p1) => {
      let testTypeYAxis = []
      p1.testType.forEach(function (pt) {
        testTypeYAxis.push(pt.name)
      })
      this.option.options.push({
        yAxis: [
          {
            gridIndex: 0,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          {
            gridIndex: 1,
            type: 'category',
            data: testTypeYAxis
          },
          {
            gridIndex: 2,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            }
          }
        ],
        xAxis: [
          {
            gridIndex: 0,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          {
            gridIndex: 1,
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#4876c7',
                width: 2
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                color: '#94aad4',
                fontSize: 20
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#052667',
                width: 2
              }
            }
          },
          {
            gridIndex: 2,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            type: 'category',
            data: []
          }
        ],
        series: [
          {
            data: p1.funnel
          },
          {
            data: p1.testType
          },
          {
            data: p1.subjectType
          },
          {
            data: []
          }
        ]
      })
    })
    // 为漏斗图的数据指定label颜色
    this.option.options.forEach(function (p1) {
      colorIndex = 0
      let valueArr = []
      p1.series[0].data.forEach(function (p2) {
        valueArr.push(p2.value)
        p2.label = {
          textStyle: {
            color: colors[colorIndex]
          }
        }
        colorIndex += 1
        if (colorIndex > colors.length) {
          colorIndex = 0
        }
      })
      p1.series[0].max = Math.max(...valueArr)
      p1.series[0].min = Math.min(...valueArr)
    })
    // 为柱状图指定颜色
    this.option.options.forEach(function (p1) {
      colorIndex = 0
      // 更改需求，阴影重设，先获取数组最大值,用于设置阴影
      let maxValue = 0
      p1.series[2].data.forEach(function (pt) {
        console.log(pt)
        if (pt.value >= maxValue) {
          maxValue = pt.value
        }
      })
      p1.series[2].data.forEach(function (p2) {
        p2.itemStyle = {
          color: gradientColors[colorIndex]
        }
        p2.label = {
          show: true,
          position: 'bottom',
          formatter: function (params) {
            return `{a|${params.name}\n${params.value}}`
          },
          rich: {
            a: {
              lineHeight: 30,
              fontSize: 22,
              color: colors[colorIndex]
            }
          }
        }
        // 处理不同屏幕尺寸下字体
        if (screen < 1920 && screen > 1200) {
          p2.label.rich.a.fontSize = 18
          p2.label.rich.a.lineHeight = 22
        }
        if (screen === 1024) {
          p2.label.rich.a.fontSize = 16
          p2.label.rich.a.lineHeight = 20
        }
        // 同时处理阴影,阴影是根据itemGap:-100%来指定
        p1.series[3].data.push(maxValue)
        colorIndex += 1
        if (colorIndex > colors.length) {
          colorIndex = 0
        }
      })
    })
  }

  // 清理方法，要将部署的新数据全部置空
  clear () {
    // this.option.baseOption.timeline.data = []
    // this.option.baseOption.legend.data = []
    this.option.options = []
  }

  getOption () {
    return this.option
  }
}

export { ChartFactory }
